<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" ><%--content="IE=edge"--%>
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->
</head>
<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <section class="content-header">
        <h1>
            统计分析
            <small>厂家销量统计</small>
        </h1>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div id="main" style="width: 1000px;height:600px;"></div>
        </div>
    </section>
</div>
</body>

<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    /*ajax*/
    $.get("/stat/getSellData.do", function (data) {

        //组装x轴的数据（数组）
        var xdata = [];
        //组装y轴的数据（数组）
        var ydata = [];

        for (var i = 0; i < data.length; i++) {
            xdata[i] = data[i].xdata;
            ydata[i] = data[i].ydata;
        }
        option = {
            title: {
                text: '销售统计',
                textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 20,
                },
                top: '3%',
                left: '10%',
            },
            backgroundColor: '#0f375f',
            grid: {
                top: "25%",
                bottom: "10%"
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                    label: {
                        show: true
                    }
                }
            },
            legend: {
                data: ["销售统计数量", "翘臀统计"],
                top: "15%",
                textStyle: {
                    color: "#ffffff"
                }
            },
            xAxis: {
                data: xdata,
                axisLine: {
                    show: true //隐藏X轴轴线
                },
                axisTick: {
                    show: true //隐藏X轴刻度
                },
                axisLabel: {
                    rotate:75,//字体旋转
                    show: true,
                    textStyle: {
                        color: "#ebf8ac" //X轴文字颜色
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#01FCE3'
                    }
                },
            },
            yAxis: [{
                type: "value",
                name: "价格",
                nameTextStyle: {
                    color: "#ebf8ac"
                },
                splitLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: true
                },
                axisLine: {
                    show: true
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#ebf8ac"
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#FFFFFF'
                    }
                },
            },
                {
                    type: "value",
                    name: "同比",
                    nameTextStyle: {
                        color: "#ebf8ac"
                    },
                    position: "right",
                    splitLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        formatter: "{value} %", //右侧Y轴文字显示
                        textStyle: {
                            color: "#ebf8ac"
                        }
                    }
                },
                {
                    type: "value",
                    gridIndex: 0,
                    min: 50,
                    max: 100,
                    splitNumber: 8,
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                        }
                    }
                }
            ],
            series: [{
                name: "统计数额",
                type: "line",
                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                smooth: true, //平滑曲线显示
                showAllSymbol: true, //显示所有图形。
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 10, //标记的大小
                itemStyle: {
                    //折线拐点标志的样式
                    color: "#058cff"
                },
                lineStyle: {
                    color: "#058cff"
                },
                areaStyle:{
                    color: "rgba(5,140,255, 0.2)"
                },
                data: ydata
            },
                {
                    name: "翘臀统计",
                    type: "bar",
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#00FFE3"
                            },
                                {
                                    offset: 1,
                                    color: "#4693EC"
                                }
                            ])
                        }
                    },
                    data: ydata
                }
            ]
        };
        myChart.setOption(option);

    });


/*
    var option = {
        title: {
            text: '销量表实例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            name: '销量',
            type: 'bar',
            data: ydata

        },
        yAxis: {},
        series: [{data: xdata,
            axisLabel: {
                rotate: 70
            }

        }]
    };*/





</script>

</html>